<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义颜色 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4A90E2',
                        secondary: '#84B6F4',
                        accent: '#B2D7FF',
                        light: '#E8F4FF',
                        dark: '#0F4C81'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .form-input-focus {
                @apply focus:ring-2 focus:ring-primary/50 focus:border-primary;
            }
            .form-label {
                @apply block text-sm font-medium text-gray-700 mb-1;
            }
            .form-error {
                @apply text-red-500 text-xs mt-1;
            }
            .card-shadow {
                @apply shadow-lg hover:shadow-xl transition-shadow duration-300;
            }
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen font-inter">
    <div class="container mx-auto px-4 py-12">
        <div class="max-w-4xl mx-auto">
            <!-- 页面标题 -->
            <div class="text-center mb-10">
                <h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-gray-800 mb-3">用户注册</h1>
                <p class="text-gray-600">请填写以下信息完成注册</p>
            </div>
            
            <!-- 注册表单卡片 -->
            <div class="bg-white rounded-2xl p-6 md:p-8 card-shadow">
                <form id="registrationForm" class="space-y-6">
                    <!-- 基本信息 -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label for="username" class="form-label">用户名 <span class="text-red-500">*</span></label>
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                    <i class="fa fa-user"></i>
                                </span>
                                <input type="text" id="username" name="username" 
                                    class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg transition-all form-input-focus"
                                    placeholder="请输入用户名">
                            </div>
                            <p id="usernameError" class="form-error hidden"></p>
                        </div>
                        
                        <div>
                            <label for="nickname" class="form-label">昵称 <span class="text-red-500">*</span></label>
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                    <i class="fa fa-id-card"></i>
                                </span>
                                <input type="text" id="nickname" name="nickname" 
                                    class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg transition-all form-input-focus"
                                    placeholder="请输入昵称">
                            </div>
                            <p id="nicknameError" class="form-error hidden"></p>
                        </div>
                    </div>
                    
                    <!-- 密码信息 -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label for="password" class="form-label">密码 <span class="text-red-500">*</span></label>
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                    <i class="fa fa-lock"></i>
                                </span>
                                <input type="password" id="password" name="password" 
                                    class="w-full pl-10 pr-10 py-2 border border-gray-300 rounded-lg transition-all form-input-focus"
                                    placeholder="请输入密码">
                                <button type="button" id="togglePassword" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500">
                                    <i class="fa fa-eye-slash"></i>
                                </button>
                            </div>
                            <div class="mt-2">
                                <p class="text-xs text-gray-500">密码要求：至少8个字符，包含大小写字母和数字</p>
                            </div>
                            <p id="passwordError" class="form-error hidden"></p>
                        </div>
                        
                        <div>
                            <label for="confirmPassword" class="form-label">重复密码 <span class="text-red-500">*</span></label>
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                    <i class="fa fa-lock"></i>
                                </span>
                                <input type="password" id="confirmPassword" name="confirmPassword" 
                                    class="w-full pl-10 pr-10 py-2 border border-gray-300 rounded-lg transition-all form-input-focus"
                                    placeholder="请再次输入密码">
                                <button type="button" id="toggleConfirmPassword" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500">
                                    <i class="fa fa-eye-slash"></i>
                                </button>
                            </div>
                            <p id="confirmPasswordError" class="form-error hidden"></p>
                        </div>
                    </div>
                    
                    <!-- 联系信息 -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label for="phone" class="form-label">电话号码 <span class="text-red-500">*</span></label>
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                    <i class="fa fa-phone"></i>
                                </span>
                                <input type="tel" id="phone" name="phone" 
                                    class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg transition-all form-input-focus"
                                    placeholder="请输入手机号码">
                            </div>
                            <p id="phoneError" class="form-error hidden"></p>
                        </div>
                        
                        <div>
                            <label for="gender" class="form-label">性别</label>
                            <div class="grid grid-cols-3 gap-2 mt-1">
                                <label class="flex items-center p-3 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50 transition-colors">
                                    <input type="radio" name="gender" value="male" class="mr-2 text-primary focus:ring-primary">
                                    <span>男</span>
                                </label>
                                <label class="flex items-center p-3 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50 transition-colors">
                                    <input type="radio" name="gender" value="female" class="mr-2 text-primary focus:ring-primary">
                                    <span>女</span>
                                </label>
                                <label class="flex items-center p-3 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50 transition-colors">
                                    <input type="radio" name="gender" value="other" class="mr-2 text-primary focus:ring-primary">
                                    <span>其他</span>
                                </label>
                            </div>
                            <p id="genderError" class="form-error hidden"></p>
                        </div>
                    </div>
                    
                    <!-- 地址信息 -->
                    <div>
                        <label for="address" class="form-label">地址</label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                <i class="fa fa-map-marker"></i>
                            </span>
                            <input type="text" id="address" name="address" 
                                class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg transition-all form-input-focus"
                                placeholder="请输入详细地址">
                        </div>
                        <p id="addressError" class="form-error hidden"></p>
                    </div>
                    
                    <!-- 籍贯信息 -->
                    <div>
                        <label for="hometown" class="form-label">籍贯</label>
                        <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
                            <select id="province" name="province" 
                                class="border border-gray-300 rounded-lg py-2 px-3 form-input-focus">
                                <option value="">请选择省份</option>
                                <option value="北京市">北京市</option>
                                <option value="上海市">上海市</option>
                                <option value="广东省">广东省</option>
                                <!-- 其他省份选项 -->
                            </select>
                            <select id="city" name="city" 
                                class="border border-gray-300 rounded-lg py-2 px-3 form-input-focus" disabled>
                                <option value="">请选择城市</option>
                            </select>
                            <select id="district" name="district" 
                                class="border border-gray-300 rounded-lg py-2 px-3 form-input-focus" disabled>
                                <option value="">请选择区县</option>
                            </select>
                        </div>
                        <p id="hometownError" class="form-error hidden"></p>
                    </div>
                    
                    <!-- 爱好信息 -->
                    <div>
                        <label class="form-label">爱好</label>
                        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2 mt-1">
                            <label class="flex items-center p-2 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50 transition-colors">
                                <input type="checkbox" name="hobbies" value="reading" class="mr-2 text-primary focus:ring-primary">
                                <span>阅读</span>
                            </label>
                            <label class="flex items-center p-2 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50 transition-colors">
                                <input type="checkbox" name="hobbies" value="music" class="mr-2 text-primary focus:ring-primary">
                                <span>音乐</span>
                            </label>
                            <label class="flex items-center p-2 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50 transition-colors">
                                <input type="checkbox" name="hobbies" value="sports" class="mr-2 text-primary focus:ring-primary">
                                <span>运动</span>
                            </label>
                            <label class="flex items-center p-2 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50 transition-colors">
                                <input type="checkbox" name="hobbies" value="travel" class="mr-2 text-primary focus:ring-primary">
                                <span>旅行</span>
                            </label>
                            <label class="flex items-center p-2 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50 transition-colors">
                                <input type="checkbox" name="hobbies" value="movie" class="mr-2 text-primary focus:ring-primary">
                                <span>电影</span>
                            </label>
                            <label class="flex items-center p-2 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50 transition-colors">
                                <input type="checkbox" name="hobbies" value="cooking" class="mr-2 text-primary focus:ring-primary">
                                <span>烹饪</span>
                            </label>
                            <label class="flex items-center p-2 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50 transition-colors">
                                <input type="checkbox" name="hobbies" value="painting" class="mr-2 text-primary focus:ring-primary">
                                <span>绘画</span>
                            </label>
                            <label class="flex items-center p-2 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50 transition-colors">
                                <input type="checkbox" name="hobbies" value="coding" class="mr-2 text-primary focus:ring-primary">
                                <span>编程</span>
                            </label>
                        </div>
                    </div>
                    
                    <!-- 同意条款 -->
                    <div class="flex items-start">
                        <div class="flex items-center h-5">
                            <input id="terms" name="terms" type="checkbox" class="w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded">
                        </div>
                        <div class="ml-3 text-sm">
                            <label for="terms" class="text-gray-600">我已阅读并同意<a href="#" class="text-primary hover:underline">用户协议</a>和<a href="#" class="text-primary hover:underline">隐私政策</a></label>
                        </div>
                    </div>
                    <p id="termsError" class="form-error hidden"></p>
                    
                    <!-- 提交按钮 -->
                    <div class="pt-4">
                        <button type="submit" id="submitBtn" 
                            class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-colors duration-300 flex items-center justify-center">
                            <span>注册账号</span>
                            <i class="fa fa-arrow-right ml-2"></i>
                        </button>
                    </div>
                    
                    <!-- 已有账号提示 -->
                    <div class="text-center text-sm text-gray-600">
                        已有账号？ <a href="#" class="text-primary hover:underline">立即登录</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <!-- 成功提示模态框 -->
    <div id="successModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-xl p-6 max-w-md w-full mx-4 transform transition-all">
            <div class="text-center">
                <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fa fa-check text-green-500 text-2xl"></i>
                </div>
                <h3 class="text-xl font-bold text-gray-800 mb-2">注册成功！</h3>
                <p class="text-gray-600 mb-6">您的账号已成功注册，即将跳转到登录页面...</p>
                <button id="closeModal" class="bg-primary hover:bg-primary/90 text-white font-medium py-2 px-6 rounded-lg transition-colors">
                    确定
                </button>
            </div>
        </div>
    </div>

    <script>
        // 表单验证逻辑
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('registrationForm');
            const successModal = document.getElementById('successModal');
            const closeModal = document.getElementById('closeModal');
            const submitBtn = document.getElementById('submitBtn');
            
            // 密码可见性切换
            const togglePassword = document.getElementById('togglePassword');
            const passwordInput = document.getElementById('password');
            togglePassword.addEventListener('click', function() {
                const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
                passwordInput.setAttribute('type', type);
                this.querySelector('i').classList.toggle('fa-eye');
                this.querySelector('i').classList.toggle('fa-eye-slash');
            });
            
            const toggleConfirmPassword = document.getElementById('toggleConfirmPassword');
            const confirmPasswordInput = document.getElementById('confirmPassword');
            toggleConfirmPassword.addEventListener('click', function() {
                const type = confirmPasswordInput.getAttribute('type') === 'password' ? 'text' : 'password';
                confirmPasswordInput.setAttribute('type', type);
                this.querySelector('i').classList.toggle('fa-eye');
                this.querySelector('i').classList.toggle('fa-eye-slash');
            });
            
            // 表单提交处理
            form.addEventListener('submit', function(e) {
                e.preventDefault();
                let isValid = validateForm();
                
                if (isValid) {
                    // 模拟提交成功
                    submitBtn.disabled = true;
                    submitBtn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 提交中...';
                    
                    setTimeout(() => {
                        successModal.classList.remove('hidden');
                        submitBtn.disabled = false;
                        submitBtn.innerHTML = '<span>注册账号</span><i class="fa fa-arrow-right ml-2"></i>';
                    }, 1500);
                }
            });
            
            // 关闭模态框
            closeModal.addEventListener('click', function() {
                successModal.classList.add('hidden');
            });
            
            // 表单验证函数
            function validateForm() {
                let isValid = true;
                
                // 重置所有错误提示
                resetErrors();
                
                // 验证用户名
                const username = document.getElementById('username').value.trim();
                if (username === '') {
                    showError('username', '用户名不能为空');
                    isValid = false;
                } else if (username.length < 3 || username.length > 20) {
                    showError('username', '用户名长度应为3-20个字符');
                    isValid = false;
                }
                
                // 验证昵称
                const nickname = document.getElementById('nickname').value.trim();
                if (nickname === '') {
                    showError('nickname', '昵称不能为空');
                    isValid = false;
                } else if (nickname.length < 2 || nickname.length > 15) {
                    showError('nickname', '昵称长度应为2-15个字符');
                    isValid = false;
                }
                
                // 验证密码
                const password = document.getElementById('password').value;
                if (password === '') {
                    showError('password', '密码不能为空');
                    isValid = false;
                } else if (password.length < 8) {
                    showError('password', '密码长度至少为8个字符');
                    isValid = false;
                } else if (!/(?=.*[A-Z])(?=.*[a-z])(?=.*\d)/.test(password)) {
                    showError('password', '密码必须包含大小写字母和数字');
                    isValid = false;
                }
                
                // 验证确认密码
                const confirmPassword = document.getElementById('confirmPassword').value;
                if (confirmPassword === '') {
                    showError('confirmPassword', '请再次输入密码');
                    isValid = false;
                } else if (confirmPassword !== password) {
                    showError('confirmPassword', '两次输入的密码不一致');
                    isValid = false;
                }
                
                // 验证电话号码
                const phone = document.getElementById('phone').value.trim();
                if (phone === '') {
                    showError('phone', '电话号码不能为空');
                    isValid = false;
                } else if (!/^1[3-9]\d{9}$/.test(phone)) {
                    showError('phone', '请输入有效的手机号码');
                    isValid = false;
                }
                
                // 验证性别
                const genderChecked = document.querySelector('input[name="gender"]:checked');
                if (!genderChecked) {
                    showError('gender', '请选择性别');
                    isValid = false;
                }
                
                // 验证籍贯
                const province = document.getElementById('province').value;
                const city = document.getElementById('city').value;
                const district = document.getElementById('district').value;
                if (province === '' || city === '' || district === '') {
                    showError('hometown', '请完整选择籍贯信息');
                    isValid = false;
                }
                
                // 验证同意条款
                const termsChecked = document.getElementById('terms').checked;
                if (!termsChecked) {
                    showError('terms', '请阅读并同意用户协议和隐私政策');
                    isValid = false;
                }
                
                return isValid;
            }
            
            // 显示错误信息
            function showError(fieldId, message) {
                const errorElement = document.getElementById(`${fieldId}Error`);
                if (errorElement) {
                    errorElement.textContent = message;
                    errorElement.classList.remove('hidden');
                    
                    // 高亮显示错误字段
                    const field = document.getElementById(fieldId);
                    if (field) {
                        field.classList.add('border-red-500');
                        field.classList.add('focus:ring-red-500/50');
                        field.classList.add('focus:border-red-500');
                        
                        // 移除高亮状态
                        field.addEventListener('input', function removeHighlight() {
                            field.classList.remove('border-red-500');
                            field.classList.remove('focus:ring-red-500/50');
                            field.classList.remove('focus:border-red-500');
                            errorElement.classList.add('hidden');
                            field.removeEventListener('input', removeHighlight);
                        });
                    }
                }
            }
            
            // 重置所有错误提示
            function resetErrors() {
                const errorElements = document.querySelectorAll('.form-error');
                errorElements.forEach(element => {
                    element.classList.add('hidden');
                    element.textContent = '';
                });
                
                // 移除所有输入字段的高亮状态
                const inputFields = document.querySelectorAll('input, select');
                inputFields.forEach(field => {
                    field.classList.remove('border-red-500');
                    field.classList.remove('focus:ring-red-500/50');
                    field.classList.remove('focus:border-red-500');
                });
            }
            
            // 籍贯联动示例
            const provinceSelect = document.getElementById('province');
            const citySelect = document.getElementById('city');
            const districtSelect = document.getElementById('district');
            
            // 模拟省份选择联动
            provinceSelect.addEventListener('change', function() {
                if (this.value) {
                    citySelect.disabled = false;
                    // 清空城市和区县选择
                    citySelect.innerHTML = '<option value="">请选择城市</option>';
                    districtSelect.innerHTML = '<option value="">请选择区县</option>';
                    districtSelect.disabled = true;
                    
                    // 模拟加载城市数据
                    setTimeout(() => {
                        // 根据选择的省份加载对应的城市
                        const cities = ['城市1', '城市2', '城市3'];
                        cities.forEach(city => {
                            const option = document.createElement('option');
                            option.value = city;
                            option.textContent = city;
                            citySelect.appendChild(option);
                        });
                    }, 300);
                } else {
                    citySelect.disabled = true;
                    districtSelect.disabled = true;
                }
            });
            
            // 模拟城市选择联动
            citySelect.addEventListener('change', function() {
                if (this.value) {
                    districtSelect.disabled = false;
                    // 清空区县选择
                    districtSelect.innerHTML = '<option value="">请选择区县</option>';
                    
                    // 模拟加载区县数据
                    setTimeout(() => {
                        // 根据选择的城市加载对应的区县
                        const districts = ['区县1', '区县2', '区县3'];
                        districts.forEach(district => {
                            const option = document.createElement('option');
                            option.value = district;
                            option.textContent = district;
                            districtSelect.appendChild(option);
                        });
                    }, 300);
                } else {
                    districtSelect.disabled = true;
                }
            });
        });
    </script>
</body>
</html>
    